<template>
  <div class="bigbox">
    <div class="bodybox">
      <!-- 盒子头部 -->
      <div class="title">
        <div><el-input suffix-icon="el-icon-search"
           v-model="input" size="small" style="width: 250px;"
           placeholder="请输入使用测点标识"
           @keyup.enter.native="getlist()"></el-input>
          </div>
          <div>
            <button class="button" @click="dialogVisible=true">新增</button>
          </div>
      </div>
      <!-- 封装引入表格区域 -->
      <div class="table">
        <ElTable ref="TableColumn" :tableConfig="tableConfig"
           :tableData="tableData">
           <el-table-column label="操作" width="150" >
            <template #default="{row}">
              <i class="el-icon-edit" style="color:#1a90fe ;margin-right: 20px; cursor: pointer;" @click="bianji(row)"></i>
              <i class="el-icon-delete" style="color: red;cursor: pointer;" @click="delgs(row)"></i>
            </template>
          </el-table-column>
        </ElTable>
      </div>
      <!-- dialog弹窗 -->
      <div class="dialog">
        <el-dialog
          :title="isbianji?'编辑公式':'新增公式'"
          :visible.sync="dialogVisible"
          width="40%"
          >
          <div style="padding: 20px;">
            <!-- form表单及校验 -->
            <div>
              <el-form :model="form" :rules="rules" ref="form" label-position="right" label-width="100px">
              <el-form-item label="公式表达式" prop="expression">
                <el-input style="width: 100%;" v-model="form.expression" size="small"></el-input>
              </el-form-item>
              <el-form-item label="适用测点" prop="value1">
                <el-select v-model="form.value1" style="width: 100%;" ref="yourSelectName" multiple placeholder="请选择公式对应测点，可多选" size="small">
                  <el-option
                  style="padding-left: 10px;"
                    v-for="(item,index) in options"
                    :key="index"
                    :label="item.text"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="公式说明" prop="explain">
                <el-input type="textarea" style="width: 100%;" v-model="form.explain"></el-input>
              </el-form-item>
            </el-form>
            </div>
            <!-- 新增公式参数以及表格 -->
            <div class="table">
              <div style="margin-bottom: 10px;margin-left: 0;">
                <button class="button sure" @click="dialogVisibles=true">新增参数</button>
              </div>
              <div style="height: 200px;">
                  <ElTable
                  :tableData="tableDatas" :tableConfig="tableConfigs">
                    <el-table-column
                    prop="address"
                    label="操作">
                    <template #default="{row}">
                      <i class="el-icon-edit" style="color:#1a90fe ;margin-right: 20px; cursor: pointer;" @click="bianjigongs(row)"></i>
                      <i class="el-icon-delete" style="color: red;cursor: pointer;" @click="delgongs(row)"></i>
                    </template>
                   </el-table-column>
                  </ElTable>
              </div>
            </div>
          </div>
          <span slot="footer" >
            <button  class="button" @click="quxiao">取 消</button>
            <button @click="submit" class="button sure">确 定</button>
          </span>
        </el-dialog>
      </div>
      <!-- 新增公式参数dialog窗 -->
      <div class="gongsidia">
        <el-dialog
          title="新增公式参数"
          :visible.sync="dialogVisibles"
          width="30%">
          <div>
            <el-form :model="forms" :rules="ruless" ref="forms" label-position="right" label-width="80px">
              <el-form-item label="参数名称" prop="argName">
                <el-input style="width: 100%;" v-model="forms.argName" size="small"></el-input>
              </el-form-item>
              <el-form-item label="对应测点" prop="value2">
                <el-select v-model="forms.value2" style="width: 100%;" multiple placeholder="请选择公式对应测点，可多选" size="small">
                  <el-option
                  style="padding-left: 10px;"
                    v-for="item in options"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="参数说明" prop="argExplain">
                <el-input type="textarea" style="width: 100%;" v-model="forms.argExplain"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" >
            <button @click="quxiaogongsi" class="button">取 消</button>
            <button type="primary" @click="canshusure" class="button sure">确 定</button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {getdatalist,getxialalist,postgongsiapi,deletegongsiapi,getchagongsiapi,putjisuangongapi} from '../../api/formula'
import ElTable from '@/components/Table/index.vue'
export default {
  name: 'CallPoliceIndex',
  components: {
    ElTable
},
  data() {
    return {
      options:[],
      value1:[],
      form: {value1:[]},
      input: '',
      isbianji:false,
      tableData: [],
      tableDatas:[],
      dialogVisible: false,
      dialogVisibles:false,
      tableConfig: [
      { label: '公式表达式', prop: 'expression'},
        { label: '公式说明', prop: 'explain'},
        { label: '使用测点标识', prop: 'applyTags' },
      ],
      tableConfigs: [
      { label: '参数名称', prop: 'argName'},
        { label: '参数说明', prop: 'argExplain'},
        { label: '对应测点', prop: 'applyTags' },
      ],
      rules: {
        expression: [{ required: true, message: '公式表达式必填', trigger: 'blur' },],
        value1: [{ required: true, message: '适用测点必选', trigger: 'blur' },],
        explain:[{ required: true, message: '公式说明必填', trigger: 'blur' },]
      },
      forms: {value2:[],argName:''},
      value2:[],
      ruless: {
        argName: [{ required: true, message: '参数名称', trigger: 'blur' },],
        value2: [{ required: true, message: '对应测点必选', trigger: 'blur' },],
        argExplain:[{ required: true, message: '参数说明必填', trigger: 'blur' },]
      },
      isbianjigong: false,
      argName:''
    };
  },

  async mounted() {
    await this.getlist()
    // 获取下拉框
    const res = await getxialalist()
    this.options=res.data.list
  },

  methods: {
    // 获取表格数据
    async getlist() {
      this.$refs.TableColumn.loading=true
      const res = await getdatalist({itemTag:this.input})
      this.tableData = res.data.list
      this.$refs.TableColumn.loading=false
    },
    //编辑公式
    async bianji(row) {
      const res = await getchagongsiapi({ id: row.id })
      this.form = { ...res.data.entity }
      this.$set(this.form, 'value1', res.data.entity.applyTags.split(','))
      this.tableDatas=res.data.entity.arguments
      this.isbianji=true
      this.dialogVisible = true
    },
    // 取消公式
    quxiao() {
      this.isbianji=false
      this.tableDatas=[]
      this.form.value1=[]
      this.dialogVisible = false
      this.$refs.form.resetFields()
    },
    // 确认新增公式
    async submit() {
      await this.$refs.form.validate()
      // 判断是否处于编辑模式还是新增模式下调不同的接口
      if (this.isbianji) {
        // 修改公式
        await putjisuangongapi({
          ...this.form,
        applyTags: this.form.value1.join(','),
        argumentJson:JSON.stringify(this.tableDatas)
        })
      } else {
        // 新增公式
        await postgongsiapi({
        ...this.form,
        applyTags: this.form.value1.join(','),
        argumentJson:JSON.stringify(this.tableDatas)
      })
      }
      this.isbianji?this.$message.success('编辑成功'):this.$message.success('新增成功')
      this.tableDatas = []
      this.getlist()
      this.form.value1 = []
      this.isbianji=false
      this.dialogVisible = false
      this.$refs.form.resetFields()
    },
    // 删除公式
    async delgs(val) {
      this.$confirm('此操作将永久删除该配置, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await deletegongsiapi({
            id:val.id
          })
          this.$message.success('删除成功')
          this.getlist()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 确认新增公式参数
    async canshusure() {
      await this.$refs.forms.validate()
      this.$nextTick(function () {
        // 判断如果是编辑状态下遍历表格数组判断修改某一项
        if (this.isbianjigong) {
          this.tableDatas.forEach(ele => {
            if (ele.argName == this.argName) {
                ele.argName= this.forms.argName,
                ele.applyTags= this.forms.value2.join(','),
                ele.argExplain=this.forms.argExplain
            }
          })
        } else {
          // 判断如果是新增状态下降数据push至表格当中
          this.tableDatas.push({
          argName: this.forms.argName,
          applyTags: this.forms.value2.join(','),
          argExplain:this.forms.argExplain
          })
        }
        this.forms.value2 = []
        this.isbianjigong=false
        this.dialogVisibles = false
        this.$refs.forms.resetFields()
      })
    },
    // 取消新增公式参数
    quxiaogongsi() {
      this.forms.value2 = []
      this.isbianjigong=false
      this.dialogVisibles = false
      this.$refs.forms.resetFields()
    },
    // 删除公式参数
    delgongs(val) {
      this.$confirm('此操作将永久删除该配置, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          this.tableDatas = this.tableDatas.filter(ele => ele.argName !== val.argName)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 编辑公式参数
    bianjigongs(val) {
      this.isbianjigong=true
      this.dialogVisibles = true
      this.argName=val.argName
      this.forms = { ...val }
      this.$set(this.forms,'value2',val.applyTags.split(','))
      // this.forms.value2 = val.applyTags.split(',')
    }
  },
  watch: {
    input(val) {
      if (!val) {
        this.getlist()
      }
    }
  }
};
</script>

<style lang="scss" scoped>
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.bigbox{
  width: 100%;
  height: 100%;
  padding: 10px;
  background-color: #f1f1f1;
  .bodybox{
    background-color: #fff;
    width: 100%;
    height: 100%;
    padding: 20px;
    .title{
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      .button{
        width: 60px;
        height: 30px;
        border-radius: 3px;
        border: none;
        color: #fff;
        background-color: #1a90fe;
      }
    }
    .table{
      height: 90%;
    }
    .dialog{
      .button{
        width: 60px;
        height: 30px;
        border-radius: 3px;
        background-color: #fff;
        border: 1px solid #ccc;
        margin-left: 10px;
      }
      .sure{
        border: none;
        color: #fff;
        background-color: #1a90fe;
      }
      .table{
        margin: 10px 0;
      }
    }
    .gongsidia{
      .button{
        width: 60px;
        height: 30px;
        border-radius: 3px;
        background-color: #fff;
        border: 1px solid #ccc;
        margin-left: 10px;
      }
      .sure{
        border: none;
        color: #fff;
        background-color: #1a90fe;
      }
    }
  }
}
::v-deep .el-form-item{
  margin-bottom: 15px;
}
</style>